<template>
  <div
    class="nav"
    :style="
      isMask
        ? 'z-index: 999999999999;'
        : 'box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);'
    "
  >
    <div class="logo">
      <div class="leftNavbar">
        <div
          v-if="!showOpenDrawerBtn && !openDrawer"
          style="
            cursor: pointer;
            padding: 0 12px 0 24px;
            width: 149px;
            box-sizing: border-box;
            height: 60px;
            padding-top: 8px;
          "
          @mouseenter="handleMouseOverLogo"
          @mouseleave="handleMouseOutLogo"
        >
          <img
            style="width: 110.34px; height: 32px"
            src="@/static/images/help_logo.png"
            alt=""
          />
        </div>
        <div
          @mouseleave="handleMouseOutLogo"
          class="DrawerBtn"
          v-if="showOpenDrawerBtn"
          @click="openDrawerClick"
        >
          <svg-icon icon-class="openDrawer"></svg-icon>
          <span class="DrawerBtn-text">点击展开</span>
        </div>
        <div class="DrawerBtn" v-else-if="openDrawer" @click="closeDrawerClick">
          <svg-icon icon-class="closeDrawer"></svg-icon>
          <span class="DrawerBtn-text">点击关闭</span>
        </div>
        <div
          class="titleText"
          :class="openDrawer || showOpenDrawerBtn ? '' : 'titleTextBefore'"
        >
          帮助文档
        </div>
      </div>
    </div>
    <div>
      <el-drawer
        title=""
        :visible.sync="openDrawer"
        direction="ltr"
        :with-header="false"
        :append-to-body="true"
        modal-class="AIdrawer"
        :modal-append-to-body="false"
        @closed="closeDrawer"
      >
        <div style="height: 100%">
          <div
            class="Drawer"
            v-if="nowhref != 'container'"
            @click="jump('container')"
          >
            <div class="DrawerBox">
              <svg-icon
                icon-class="containerCenter"
                class="DrawerIcon"
              ></svg-icon>
            </div>
            容器中心
          </div>
          <div class="Drawer" v-if="nowhref != 'users'" @click="jump('users')">
            <div class="DrawerBox">
              <svg-icon icon-class="userCenter" class="DrawerIcon"></svg-icon>
            </div>
            个人中心
          </div>
          <div
            class="Drawer"
            v-if="nowhref != 'mirror'"
            @click="jump('container/#/mirror')"
          >
            <div class="DrawerBox">
              <svg-icon icon-class="community" class="DrawerIcon"></svg-icon>
            </div>
            应用社区
          </div>
          <div class="Drawer" @click="jump()">
            <div class="DrawerBox">
              <svg-icon icon-class="website" class="DrawerIcon"></svg-icon>
            </div>
            算家云官网
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navigation',
  // props:{
  //   searchFather:String
  // },
  props: ['handleSelectchild', 'searchFather'],
  data() {
    return {
      nowhref: '',
      openDrawer: false,
      isMask: false,
      index: 0,
      bodyResult: {},
      restaurants: [],
      search: '',
      isSearch: false, //是否显示搜索框
      selectTheme: {
        //选择的主题
        id: 0,
        value: 'defult',
      },
      showOpenDrawerBtn: false, //是否显示点击展开按钮
    }
  },
  watch: {
    // 监听来自父组件的 value 变化，更新子组件内部的 searchFather
    searchFather(newVal) {
      if (this.search != newVal) {
        this.search = ''
      }
    },
  },

  mounted() {},
  methods: {
    handleMouseOverLogo() {
      //鼠标移入logo
      this.showOpenDrawerBtn = true
    },
    handleMouseOutLogo() {
      if (!this.openDrawer) {
        this.showOpenDrawerBtn = false
      }
    },
    openDrawerClick() {
      //点击展开
      this.showOpenDrawerBtn = false
      clearTimeout(this.timer)
      clearTimeout(this.timer2)
      this.openDrawer = true
      this.isMask = true
    },
    closeDrawer() {
      this.isMask = false
    },
    closeDrawerClick() {
      //点击关闭
      // this.timer = setTimeout(() => {
      this.openDrawer = false
      this.showOpenDrawerBtn = true
      // }, 200); // 设置200毫秒延迟，调整以避免闪烁
      this.timer2 = setTimeout(() => {
        this.isMask = false
      }, 300)
    },
    jump(value, key) {
      const href = `${urlObject.protocol}//${urlObject.host}/`

      if (key) {
        this.$refs.dropdownMenu.show()
      }
    },
  },
}
</script>
<style scoped lang="scss">
.nav {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 999;
  width: 100%;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  height: 60px;
  // padding: 0 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 1);
  //box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  // position: relative;
  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  // border: 1px solid #f00;

  // height: 60px;
  // overflow: hidden;
  // position: relative;
  // background: #fff;
  // // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  // // border: 1px solid #f00;
  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  // width: 100%;
  // z-index: 9;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .logo {
    color: #000;
    // font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // cursor: pointer;

    .leftNavbar {
      // padding-left: 24px;
      display: flex;
      align-items: center;

      .titleText {
        margin-left: 12px;
        // color: rgba(7, 118, 249, 1);
        // color: var(--text-color);
        color: rgba(34, 34, 34, 1);
        // border: 1px solid #f00;
        // background: var(--background-color);
        font-size: 16px;
        font-weight: 700;
        height: 60px;
        line-height: 57px;
        position: relative;
      }

      .titleTextBefore::before {
        content: '';
        position: absolute;
        left: -12px;
        // top: -2px;
        width: 2px;
        top: 18px;
        // height: 100%;
        height: 20px;
        border-radius: 2px;
        // background: rgba(7, 118, 249, 1);
        // background: var(--background-color);
        background-color: rgba(63, 181, 73, 1);
      }
      .DrawerBtn {
        width: 149px;
        height: 60px;
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;
        justify-content: center;
        background: rgba(63, 181, 73, 1);
        .DrawerBtn-text {
          margin-left: 10px;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }

    .model_name {
      width: 80px;
      margin-top: 7px;
      color: rgba(34, 34, 34, 1);
      font-size: 18px;
      font-weight: 700;
    }

    // .hasTitle {
    //   margin-left: 10px;
    //   font-weight: 700;
    // }
  }

  .meun {
    color: #000;
    margin: 0 60px 0;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    font-size: 16px;

    // border: 1px solid #f00;
    .left {
      display: flex;

      a {
        text-decoration: none;
        color: #000;
      }
    }

    // span + span {
    //   margin-left: 40px;
    // }
    .hover {
      margin-left: 40px;
    }

    span {
      position: relative;
      cursor: pointer;
      opacity: 1;
      transition: all 0.2s ease;
    }

    span.hover:hover::after {
      content: '';
      position: absolute;
      font-family: iconfont;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background-color: #000;
    }

    .active::after {
      content: '';
      position: absolute;
      font-family: iconfont;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background-color: #000;
    }
  }

  .unlogin {
    font-size: 16px;

    .register {
      width: 120px;
      height: 60px;
      text-align: center;
      cursor: pointer;
      // background-color: #0776f9;
      background: var(--background-color);
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        color: #fff;
      }

      &:hover {
        // background-color: #36cc61;
        background: var(--transparent-color-eight);
      }
    }
  }
}

@media screen and (max-width: 780px) {
  .nav {
    .meun {
      .left {
        display: none;
      }
    }
  }
}

// .el-input{
//   width: 20%;
//   margin-left: 80px;
//   margin-right: 8px;
// }
.inline-input {
  width: 20%;
  margin-left: 80px;
  margin-right: 8px;
}

::v-deep .el-drawer {
  // border: 1px solid #f00;
  margin-top: 60px;
  box-shadow: none !important;
  width: 148px !important;

  .Drawer {
    // border: 1px solid #f00;
    height: 106px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;

    .DrawerBox {
      width: 30px;
      height: 30px;
      margin: 0 auto;
      margin-bottom: 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      line-height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .DrawerIcon {
        width: 16.65px;
        height: 17.48px;
      }
    }
  }

  .Drawer:hover {
    background: rgba(247, 250, 248, 1);
    color: rgba(63, 181, 73, 1);

    .DrawerBox {
      background: rgba(63, 181, 73, 1);
    }
  }
}
</style>
